import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:fwanandroid/model/api/WanAndroidService.dart';
import 'package:fwanandroid/model/bean/Navigation.dart';
import 'package:scrollview_observer/scrollview_observer.dart';

class NavigationPage extends StatefulWidget {
  const NavigationPage({super.key});

  @override
  State<NavigationPage> createState() => _NavigationPageState();
}

class _NavigationPageState extends State<NavigationPage>
    with TickerProviderStateMixin {
  List<Navigation> _navigations = <Navigation>[];
  List<ExtendedTab> _tabs = <ExtendedTab>[];
  late TabController tabController;
  late ListObserverController observerController;
  ScrollController scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    observerController = ListObserverController(controller: scrollController);
    loadNavigation();
  }

  @override
  Widget build(BuildContext context) {
    if (_tabs.isEmpty) {
      return Container(color: Colors.white,);
    } else {
      return Scaffold(
        body: Container(
          color: Colors.white,
          child: Row(
            children: [
              ExtendedTabBar(
                isScrollable: true,
                labelColor: Colors.black,
                unselectedLabelColor: Colors.grey,
                scrollDirection: Axis.vertical,
                tabs: _tabs,
                controller: tabController,
              ),
              Expanded(
                child: ListViewObserver(
                  controller: observerController,
                  child: ListView.builder(
                    controller: scrollController,
                      itemCount: _navigations.length,
                      itemBuilder: (context, index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              height: 8,
                            ),
                            Text(
                              _navigations[index].name,
                              style:
                                  TextStyle(fontSize: 16, color: Colors.black),
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Wrap(
                              spacing: 8,
                              runSpacing: 8,
                              direction: Axis.horizontal,
                              children:
                                  _navigations[index].articles.map((item) {
                                return Text(item.title,
                                    style: TextStyle(
                                        fontSize: 12, color: Colors.grey));
                              }).toList(),
                            )
                          ],
                        );
                      }),
                ),
              )
            ],
          ),
        ),
      );
    }
  }

  void loadNavigation() {
    EasyLoading.show(status: 'loading...');
    WanAndroidService.getNavigation().then((value) {
      tabController = TabController(length: value.length, vsync: this);
      tabController.addListener(() {
        observerController.animateTo(
          index: tabController.index,
          duration: const Duration(milliseconds: 500),
          curve: Curves.ease,
        );
      });
      setState(() {
        _navigations = value;
        _tabs = value.map((item) {
          return ExtendedTab(
            text: "${item.name}",
            scrollDirection: Axis.horizontal,
            height: 50,
          );
        }).toList();
      });
    }).whenComplete((){
      EasyLoading.dismiss();
    });
  }
}
